<?php include_partial('task/css') ?>
<?php use_helper('Php2Js'); ?>
<!-- 4 scripts para a arvore -->
<script type="text/javascript" src="/js/extlibs/jsTree/_lib/jquery.metadata.js"></script>
<script type="text/javascript" src="/js/extlibs/jsTree/_lib/css.js"></script>
<script type="text/javascript" src="/js/extlibs/jsTree/_lib/jquery.cookie.js"></script>
<script type="text/javascript" src="/js/extlibs/jsTree/source/tree_component.js"></script>

<!-- 3 scripts para os templates -->
<script type="text/javascript" src="/js/gradua/gradua.tree.js"></script>
<script type="text/javascript" src="/js/tasks.task.js"></script>
<script type="text/javascript" src="/js/tasks.tasks.js"></script>

<style>
.task-tree {
    width: 390px;
    height: 500px;
    overflow: auto;
    background-color: #fff;
    border: solid 2px #fff;
    padding: 4px;
}

.task-tree-selected {
    width: 390px;
    height: 500px;
    overflow: auto;
    background-color: #fff;
    border: solid 2px #9aa;
    padding: 4px;
}

.task-data {
    padding: 20px;
    width: 800px;
    height: 500px;
    overflow: auto;
}
</style>

<?php include_partial('tasks/menu'); ?><!-- vai pro slot -->

<h2>
    Tasks
    <span id='tasks-tree-loading' style='display:none'><image id='alg' src='/images/ajax_loading.gif'/></span>
</h2>

<table>
    <tr>
        <td valign="top">
            <div class='task-tree' id="content-navigation-container">
                Arvore
            </div>
        </td>
        <td valign="top">
            <div class='task-data' id="node-data"></div>
        </td>
    </tr>
</table>

<script>
    var tree;
    $('document').ready(function(){
       tree = <?php echo json_encode($tree) ?>;
       tasks.tree = gradua.buildTree(
            {
                selected:false,
                paths : {
                    "delete": "tasks/delete",
                    refresh:  "tasks/refresh",
                    rename:   "tasks/rename",
                    move:     "tasks/move",
                    insert:   "tasks/insert"
                },
                newItemId : 'NOVONOVO',
                newItemIdOnAjaxUpdate : 'NOVONOVO-ATUALIZANDO',
                newItemJson : { attributes : { 'id' : 'NOVONOVO' } },
                loadingElementId : 'tasks-tree-loading',
                containerId : "content-navigation-container"
            }
       );
       tasks.tree.display({tree:tree});
       <?php if($id): ?>
           $.tree_reference('content-navigation-container').select_branch(tasks.tree.findNodeById(<?php echo ($id)?>));
           tasks.task.showNodeData({id:<?php echo $id ?>});
       <?php endif; ?>


       tasks.tabs = function() {
                var selected = false;
                var containerId = 'nodeContent';
                var tabsId = 'nodeTabs';
                return {
                    select: function() {
                        $('#'+containerId).removeClass('tabs');
                        $('#'+containerId).addClass('tabs-selected');
                        selected = true;
                    },
                    deselect: function() {
                        $('#'+containerId).removeClass('tabs-selected');
                        $('#'+containerId).addClass('tabs');
                        selected = false;
                    },
                    selectOrDeselect : function(evt) {
                        var parents;
                        var thisTabs = tasks.tabs;
                        select = false;
                        if($(evt.target).attr('id') == containerId) {
                            select = true;
                        }
                        else {
                            parents = $(evt.target).parents();
                            for( var a = 0; a < parents.length; a++) {
                                if( $(parents[a]).attr('id') == containerId ) {
                                    select = true;
                                }
                            }
                        }
                        if(select) {thisTabs.select();} else {thisTabs.deselect();}
                    },
                    keypress : function(evt) {
                        var thisTabs = tasks.tabs;
                        var selectedIndex = $('#'+tabsId).tabs('option','selected');
                        if (evt.keyCode == 9) {
                            if(selected) {
                                thisTabs.deselect();
                                tasks.tree.select();
                            }
                            else {
                                tasks.tree.deselect();
                                thisTabs.select();
                            }
                        }
                        else if(selected) {
                            if (evt.keyCode == 39) {
                                $('#'+tabsId).tabs('option','selected',selectedIndex+1);
                            }
                            else if (evt.keyCode == 37) {
                                $('#'+tabsId).tabs('option','selected',selectedIndex-1);
                            }
                        }
                    }
                }
        }();
        
        $(document).bind('click',tasks.tabs.selectOrDeselect);
        $(document).bind('keypress',tasks.tabs.keypress);
    });
</script>